var template_= `
<div class="menu">
  <el-button type="primary" size="mini" icon="el-icon-plus" @click="AddMenu">添加根菜单</el-button>
  <el-table  :data="menuData" default-expand-all ref="multipleTable"
             style="width: 100%;margin-bottom: 20px;"
             row-key="id" tooltip-effect="dark"
             border>
    <el-table-column prop="meta" label="菜单名称" show-overflow-tooltip></el-table-column>
    <el-table-column prop="path" label="路由" show-overflow-tooltip></el-table-column>
    <el-table-column prop="component" label="组件" show-overflow-tooltip></el-table-column>
    <el-table-column prop="icon" label="图标" width="90">
      <template slot-scope="scope">
          <span style="font-size: 25px"><i :class="scope.row.icon"></i></span>
          {{  }}  
       </template>
    </el-table-column>
    <el-table-column prop="added" label="新增" width="90" ></el-table-column>
    <el-table-column prop="modify" label="修改" width="90" ></el-table-column>
    <el-table-column prop="del" label="删除" width="90" ></el-table-column>
    <el-table-column prop="px" label="排序" width="90" align="center"></el-table-column>
    <el-table-column label="操作" fixed="right" width="170">
      <template slot-scope="scope">
        <el-button  plain circle type="warning"  icon="el-icon-edit" size="small" @click="edit(scope.row)"></el-button>
        <el-button  plain type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row)"></el-button>
        <el-button  v-if="scope.row.children" plain circle type="primary"  icon="el-icon-plus" size="small" @click="append(scope.row)"></el-button>

      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="" :visible.sync="editDialog" width="50%"  >
    <el-form :model="editForm" label-width="100px" :rules="rules" ref="ruleForm">
      <el-form-item label="菜单名称" >
        <el-input v-model="editForm.meta" ></el-input>
      </el-form-item>

      <el-form-item label="路由"  prop="path">
        <el-input v-model="editForm.path"></el-input>
      </el-form-item>
      <el-form-item label="组件"  prop="component">
        <el-input v-model="editForm.component"></el-input>
      </el-form-item>
      <el-form-item label="icon" >
        <el-select v-model="editForm.icon" placeholder="请选择图标" filterable allow-create default-first-option clearable>
          <el-option v-for="(item, index) in iconlist" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled">
                     <span style="float: left">{{ item.label }}</span>
                     <span style="float: right;font-size: 30px"><i :class="item.value"></i></span>
                     </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="新增" >
        <el-input v-model="editForm.added"></el-input>
      </el-form-item>
      <el-form-item label="修改" >
        <el-input v-model="editForm.modify"></el-input>
      </el-form-item>
      <el-form-item label="删除" >
        <el-input v-model="editForm.del"></el-input>
      </el-form-item>    
      <el-form-item label="排序" >
        <el-input v-model="editForm.px"></el-input>
      </el-form-item>               
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="editDialog=false">取 消</el-button>
      <el-button type="primary" @click="editsave('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
 
</div>
`
// 
export default {
  name: 'menu1',
  data() {
    return {
      filterText: '',
      id:1000,
      editDialog:false,
      dialogFormVisible: false,
      editForm: {
        label: '',
        href: '',
        icon: '',
        target: '_self',
      },
      iconlist:iconlist,
      parentID:'999', //999为 修改
      menuData:[],
      rules: {
        path: [ { required: true, message: '请输入路由', trigger: 'blur' },],
      }
    }
  },
  methods: {
    getMenuData(){
      axios.post('controller/menu.php?lx=getTreeTableData').then((res) => {
        this.menuData=res.data.data
      });
    },
    AddMenu(){
      this.editForm= {}
      this.editDialog=true
      this.parentID="root"
    },
    append(data) {
      console.log(data)
      this.editForm= {}
      this.editDialog=true
      this.parentID=data.id
    },
    remove(data) {
      this.$confirm('确时要删除【'+data.label+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {

        axios.post('controller/menu.php?lx=delMenu', {
          id:data.id
        }).then((res) => {
          console.log(res)
          this.$message({
            message: res.data.message,
            type: 'success',
          });
          this.getMenuData()
        });
      }).catch(() => {  });
    },
    edit(data) {
      console.log(data)
      this.editForm=data
      this.editDialog=true
    },
    editsave(formName){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {          
          axios.post('controller/menu.php?lx=saveEditMenu&id='+this.parentID, this.editForm).then((res) => {
            console.log(res)
            this.$message({
              message: res.data.message,
              type: 'success',
            });
            this.editDialog=false
            this.parentID="999"
            this.getMenuData()
          }); 
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
  },
  created(){

  },
  mounted(){
    this.getMenuData()
  }, 
  template:template_,
}

